<!DOCTYPE html>
<html lang="cn" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>数据汇总大屏</title>
    <script src="/js/vue.global.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/echarts.min.js"></script>

    <style>
        *{
            font-family: 仿宋;
            color: rgb(16, 91, 6);
        }
        body {
            background-image: url('img/bizhi.jpg');
            background-repeat: no-repeat; /* 背景图片不重复 */
            background-size: cover; /* 背景图片覆盖整个元素 */
            background-position: center; /* 背景图片居中 */
        }
        a{
            text-decoration: none;
        }
        html body{
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        .containerBtn{
            width: 200px;
            background-color: cornsilk;
            padding: 15px;
            border: none;
            cursor: pointer;
        }
        .containerBtn1{
            width: 200px;
            background-color: #d1e8be;
            padding: 15px;
            border: none;
            cursor: pointer;
        }
        .container{
            position: relative;
            display: inline-block;
            /*width: 230px;*/
        }
        .hidden-container{
            left: 100px;
            display: none;
            position: absolute;
            background-color: antiquewhite;
            width: 230px;
            box-shadow: 0px 8px 16px 0px rgb(0,0,0,0.2);
            z-index: 1;
        }
        .hidden-container a{
            margin-left: 20px;
        }
        .hidden-container a:hover{
            color: #34640d;
            font-size: 22px;

        }
        .container:hover .hidden-container{
            display: block;
        }
        .container:hover .containerBtn{
            background-color: #96d08e;
        }
        .chartall{
            float: left;
            width: 33%;
            margin-bottom: 10px;
            margin-top: 10px;
        }
    </style>
</head>

<body id="app">
<div style="width: 100%;height: 600px">
    <!--头部-->
    <div style="height: 50px;width: 100%;padding-top: 20px">
        <span style="margin-left: 40%;margin-top: 15%;font-size: 24px;font-family: 仿宋" >早餐管理系统后台</span>
        <div style="margin-top: -30px">
            <span v-on:click="this.adminUnlogin()" style="margin-left: 90%;font-size: 20px">退出</span>
        </div>
    </div>

    <div style="width: 230px;background-color: cornsilk;height: calc(100% - 30px);float: left">
        <div class="containerBtn1"><span style="margin-left: 30%">客户管理</span></div>
        <div class="containerBtn"><span style="margin-left: 30%">类型管理</span></div>
        <div class="containerBtn1"><span style="margin-left: 30%"><a href="/admin/foods.html">食品管理</a></span></div>
        <div class="container">
            <button class="containerBtn" style="width: 230px">数据分析</button>
            <div class="hidden-container"><br>
                <a href="/admin/foods-num.html">食品实时库存柱状图</a><br><br>
                <a href="/admin/foods-sale-price.html">食品销售额饼图</a><br><br>
                <a href="/admin/orders-num-group-by-hour.html">小时订单实时折线图</a><br><br>
                <a href="/admin/orders-foods.html">不同类型销售比例图</a><br><br>
                <a href="/admin/orders-typesId-hour.html">小时不同类型打包图</a><br><br>
                <a href="/admin/summation-data.html">数据汇总大屏</a><br><br>
            </div>
        </div>
        <div class="containerBtn1"><span style="margin-left: 30%">系统日志</span></div>
        <div class="containerBtn"><span style="margin-left: 30%">推荐参数</span></div><br>
    </div>
    <!--右边显示区域-->
    <div style="width: calc(100% - 230px);height: 900px;float: left">
        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
        <!-- 为每个图表添加一个容器 -->
        <div style="clear: both"></div>
        <div style="clear: both">
            <div class="chartall">
                <div id="chartBar" style="width: 400px;height: 400px;border: 1px solid black;"></div>
                <div id="chartPie" style="width: 400px;height: 400px;border: 1px solid black" ></div>
            </div>
            <div class="chartall">
                <div id="chartLine" style="width: 400px;height: 400px;border: 1px solid black;margin-top: 100px" ></div>
            </div>
            <div class="chartall">
                <div id="chartBarLine1" style="width: 400px;height: 400px;border: 1px solid black" ></div>
                <div id="chartBarLine2" style="width: 400px;height: 400px;border: 1px solid black" ></div>
            </div>
        </div>
    </div>

    <div style="clear: both"></div>
</div>
</body>
<script>
    //定义app
    const app = {

        //数据绑定
        data() {
            return {
                //数据1
                x:[],
                y:[],
                //数据2
                foodsData:[
                    {value: 1048, name: 'Search Engine'},
                    {value: 735, name: 'Direct'},
                    {value: 580, name: 'Email'},
                    {value: 484, name: 'Union Ads'},
                    {value: 300, name: 'Video Ads'}
                ],
                //数据3
                x3:[],
                y3:[],

                //数据4
                foodsByTypes:[{ value: 10, name: "青菜瘦肉粥", },
                    { value: 1, name: "小笼包" }],
                ordersByTypes:[],

                //数据5
                x5:[],
                y5:[],
                k5:[],
            }
        },
        //事件绑定
        methods: {

            // 去除数组中的重复值
            uniqueArray: function(array) {
                return array.filter((value, index, self) => self.indexOf(value) === index);
            },

            //图表初始化
            initEcharts: function () {
                // 计算每个小时的订单总数
                const sumByHour = this.x5.reduce((acc, hour) => {
                    // 累加同一个小时的所有订单数量
                    const sum = this.k5.filter((value, index) => this.x5[index] === hour).reduce((sum, value) => sum + value, 0);
                    // 将结果存储在累加器中
                    acc.push(sum);
                    return acc;
                }, []);
                console.log("图表开始初始化...")

                // 基于准备好的dom，初始化echarts实例
                var myChart1 = echarts.init(document.getElementById('chartBar'));

                var myChart2 = echarts.init(document.getElementById('chartPie'));
                var myChart3 = echarts.init(document.getElementById('chartLine'));
                var myChart4 = echarts.init(document.getElementById('chartBarLine1'));
                var myChart5 = echarts.init(document.getElementById('chartBarLine2'));
                // 指定图表的配置项和数据
                var option1 = {
                    title: {
                        text: '食品实时库存图'
                    },
                    tooltip: {},
                    legend: {
                        data: ['库存']
                    },
                    xAxis: {
                        data: this.x
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '库存',
                            type: 'bar',
                            data: this.y,
                            //样式
                            itemStyle: {
                                barBorderRadius: 5,
                                borderWidth: 1,
                                borderType: 'solid',
                                borderColor: '#73c0de',
                                shadowColor: '#5470c6',
                                shadowBlur: 3
                            }
                        }
                    ]
                };

                var option2 = {
                    title: {
                        text: '食品销售额饼图',
                        subtext: '今天',
                        left:'center'
                    },
                    tooltip: {},
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    xAxis: {
                    },
                    yAxis: {},
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius:'50%',
                            data: this.foodsData,
                            //样式
                            itemStyle: {
                                barBorderRadius: 5,
                                borderWidth: 1,
                                borderType: 'solid',
                                borderColor: '#73c0de',
                                shadowColor: '#5470c6',
                                shadowBlur: 3
                            }
                        }
                    ]
                };

                var option3 = {
                    title: {
                        text: '每小时食品销量折线图',
                        subtext: '今天',
                        left:'center'
                    },
                    tooltip: {},
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    xAxis: {
                        data:this.x3
                    },
                    yAxis: {

                    },
                    series: [
                        {
                            name: '销售',
                            type: 'line',
                            radius:'50%',
                            data: this.y3,
                            //样式
                            itemStyle: {
                                barBorderRadius: 5,
                                borderWidth: 1,
                                borderType: 'solid',
                                borderColor: '#73c0de',
                                shadowColor: '#5470c6',
                                shadowBlur: 3
                            }
                        }
                    ]
                };

                var option4= {

                    title: {
                        text: '不同类型销售比例图',
                        left:'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                    },
                    series: [
                        {
                            name: '不同类型的总数',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:this.foodsByTypes
                        },
                        {
                            name: '不同类型销售比例',
                            type: 'pie',
                            radius: [0, '30%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:this.ordersByTypes
                        }
                    ],

                };



                var option5 =  {
                    title: {
                        text: '小时不同类型打包图',
                        subtext: '今天',
                        left:'center'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['粥类', '包子类'],
                        orient: 'vertical',
                        left: 'right'
                    },
                    xAxis: {
                        type: 'category',
                        data: this.x5, // 假设this.x是一个包含小时数据的数组
                        axisLabel: {
                            formatter: '{value} 点',
                            // color: 'blue' // 设置X轴标签颜色
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} 个',
                            color: 'green' // 设置Y轴标签颜色
                        }
                    },
                    series: [
                        {
                            name: '堂食',
                            type: 'bar',
                            data: this.k5.filter((value, index) => this.y5[index] === 'false'), // 假设this.k是数量数据数组，this.y是是否打包数据数组
                            itemStyle: {
                                // color: 'red' // 设置堂食柱状图颜色
                            }
                        },
                        {
                            name: '打包',
                            type: 'bar',
                            data: this.k5.filter((value, index) => this.y5[index] === 'true'),
                            itemStyle: {
                                // color: 'orange' // 设置打包柱状图颜色
                            }
                        },
                        {
                            name: '数量',
                            type: 'line',
                            data: sumByHour,
                            itemStyle: {
                                // color: 'purple' // 设置折线图颜色
                            }
                        }
                    ]
                };

                myChart5.setOption(option5);
                myChart4.setOption(option4);
                myChart3.setOption(option3);
                //使用刚指定的配置项和数据显示图表。
                myChart2.setOption(option2);
                //使用刚指定的配置项和数据显示图表。
                myChart1.setOption(option1);
            },

            //退出登录
            adminUnlogin:function (typesId) {
                axios({
                    method: "post", url: "/adminUnlogin", data: {}
                }).then((response) => {
                    if(response.data==="ok"){
                        alert("退出成功！")
                        window.location.href="/index.html"
                    }else {
                        alert(response.data)
                    }
                });
            },
            //获取所有食品1
            getFoodsNum: function () {
                axios({
                    method: "post", url: "/getFoodsNum", data: {}
                }).then((response) => {
                    this.x=response.data.x
                    this.y=response.data.y

                    //初始化图表
                    this.initEcharts()
                });
            },

            //获取数据2
            getFoodsSalePrice: function () {
                axios({
                    method: "post", url: "/getFoodsSalePrice", data: {}
                }).then((response) => {
                    this.foodsData=response.data
                    console.log("开始显示图表")
                    //初始化图表
                    this.initEcharts()
                });
            },

            //获取数据3
            getOrdersNumGroupByHour: function () {
                axios({
                    method: "post", url: "/getOrdersNumGroupByHour", data: {}
                }).then((response) => {
                    this.x3=response.data.x
                    this.y3=response.data.y
                    console.log("开始显示图表")
                    //初始化图表
                    this.initEcharts()
                });
            },

            //获取数据4
            // 获取数据
            getFoodsByNum: function() {
                axios({
                    method: "post", url: "/getFoodsByNum", data: {}
                }).then((response) => {
                    this.foodsByTypes = response.data;
                    console.log("开始显示图表")
                    // 初始化图表
                    this.initEcharts();
                });
            },
            //获取数据
            getOrdersByNum: function () {
                axios({
                    method: "post", url: "/getOrdersByNum", data: {}
                }).then((response) => {
                    this.ordersByTypes=response.data
                    console.log("开始显示图表")
                    //初始化图表
                    this.initEcharts()
                });},

            //获取数据5
            getOrdersByTypesIdHour: function () {
                axios({
                    method: "post", url: "/getOrdersByTypesIdHour", data: {}
                }).then((response) => {
                    this.x5=this.uniqueArray(response.data.x)
                    this.y5=response.data.y
                    this.k5=response.data.k

                    console.log("开始显示图表")
                    //初始化图表
                    this.initEcharts()
                });
            },
        },


        //构造方法
        mounted() {
            console.log("vue启动成功！")
            this.getFoodsNum()
            this.getFoodsSalePrice()
            this.getOrdersNumGroupByHour()
            this.getFoodsByNum()
            this.getOrdersByNum()
            this.getOrdersByTypesIdHour()
            this.initEcharts()
        }
    }

    //启动app
    Vue.createApp(app).mount("#app")
</script>
</html>